<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
	  <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
	  <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>	  
	  <script type="text/javascript" charset="utf-8">
	  
    var deviceInfo = function(){      
      document.getElementById("platform").innerHTML = device.platform;
      document.getElementById("version").innerHTML = device.version;
      document.getElementById("uuid").innerHTML = device.uuid;
      console.log("Height:" + window.innerHeight);
	  console.log("Width:" + window.innerWidth);
    }
    
    var getLocation = function() {
      var suc = function(p){
		    alert(p.coords.latitude + " " + p.coords.longitude);
      };
      var fail = function(){};
      navigator.geolocation.getCurrentPosition(suc,fail);
    }
    
    var beep = function(){
	    navigator.notification.beep(2);
    }
	
  	var vibrate = function(){
  	  navigator.notification.vibrate(0);
  	}
	
  	var getContact = function(){
  	  var suc = function(c){ alert("Contact 4: " + c.contacts[3].name); };
  		var fail = function(){};
  		navigator.ContactManager.get(suc, fail);
  	}
  	
  	var watchAccel = function() {
  		var suc = function(a){
  			document.getElementById('x').innerHTML = roundNumber(a.x);
  			document.getElementById('y').innerHTML = roundNumber(a.y);
  			document.getElementById('z').innerHTML = roundNumber(a.z);
  		};
  		var fail = function(){};
  		var opt = {};
  		opt.frequency = 100;
  		timer = navigator.accelerometer.watchAcceleration(suc,fail,opt);
  	}
    	
    function roundNumber(num) {
      var dec = 3;
      var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
      return result;
    }
    
	var preventBehavior = function(e) { 
      e.preventDefault(); 
    };

    function show_pic()
    {
      var viewport = document.getElementById('viewport');
      viewport.style.display = "";
      navigator.camera.getPicture(dump_pic, fail, { quality: 50 }); 
    }

    function dump_pic(data)
    {
      var viewport = document.getElementById('viewport');
      console.log(data);
      viewport.style.display = "";
      viewport.style.position = "absolute";
      viewport.style.top = "10px";
      viewport.style.left = "10px";
      document.getElementById("test_img").src = "data:image/jpeg;base64," + data;
    }

    function close()
    {
      var viewport = document.getElementById('viewport');
      viewport.style.position = "relative";
      viewport.style.display = "none";
    }

    function fail(fail)
    {
      alert(fail);
    }

  	// This is just to do this.
  	function readFile()
  	{  	
   		navigator.file.read('/sdcard/phonegap.txt', fail , fail);
  	}

  	function writeFile()
  	{
  	  	navigator.file.write('foo.txt', "This is a test of writing to a file", fail, fail);
  	}

	function get_contacts()
	{
		navigator.ContactManager.getAllContacts(count_contacts, fail, null);		
	}

	function count_contacts(contacts)
	{		
		alert(contacts.length);
	}
  	
	function init(){
		document.addEventListener("touchmove", preventBehavior, false);
		document.addEventListener("deviceReady", deviceInfo, true);		
	}

	
	
  </script>
  </head>
  <body onload="init();" id="stage" class="theme">
    <h1>Welcome to PhoneGap!</h1>
    <h2>this file is located at assets/index.html</h2>
    <div id="info">
      <h4>Platform: <span id="platform">&nbsp;</span></h4>
      <h4>Version: <span id="version">&nbsp;</span></h4>
      <h4>UUID:   <span id="uuid">&nbsp;</span></h4>
    </div>
    <dl id="accel-data">
      <dt>X:</dt><dd id="x">&nbsp;</dd>
      <dt>Y:</dt><dd id="y">&nbsp;</dd>
      <dt>Z:</dt><dd id="z">&nbsp;</dd>
    </dl>
    <a href="#" class="btn large" onclick="watchAccel();">Watch Accelerometer</a>
    <a href="#" class="btn large" onclick="getLocation();">Get Location</a>
	<a href="tel://411" class="btn large">Call 411</a>
    <a href="#" class="btn large" onclick="beep();">Beep</a>
    <a href="#" class="btn large" onclick="vibrate();">Vibrate</a>
    <a href="#" class="btn large" onclick="show_pic();">Get a Picture</a>
    <a href="#" class="btn large" onclick="get_contacts();">Get phone's contacts</a>
    <div id="viewport" class="viewport" style="display: none;">       
      <img style="width:60px;height:60px" id="test_img" src="" />
    </div> 
  </body>
</html>
